<template>
  <div class="c-accessory">
    <div v-if="!isOffice&&!isZip" class="img" :style="{width,height}">
      <el-image :src="comSrc" :fit="fit" :preview-src-list="[comSrc]" />
    </div>
    <div v-else class="img" :style="{width,height}">
      <el-image :src="comSrc" :fit="fit" @click.native="clickHandle" />
    </div>
  </div>
</template>
<script>
import excel from '@/assets/accessory/excel.png'
import docx from '@/assets/accessory/docx.png'
import pdf from '@/assets/accessory/pdf.png'
import zip from '@/assets/accessory/zip.png'
import dwg from '@/assets/accessory/dwg.png'
import ppt from '@/assets/accessory/ppt.png'
export default {
  name: 'CAccessory',
  props: {
    src: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    fit: {
      type: String,
      default: 'contain'
    },
    width: {
      type: String,
      default: '40px'
    },
    height: {
      type: String,
      default: '40px'
    }
  },
  data() {
    return {

    }
  },
  computed: {
    realType() {
      return this.type ? this.type : (this.src || '').split(/\./g).pop()
    },
    isOffice() {
      return /^.?(docx?|pdf|xlsx?|pptx?)$/.test(this.realType)
    },
    isZip() {
      return /^.?zip$/.test(this.realType)
    },
    comSrc() {
      return /^.?docx?$/.test(this.realType) ? docx : /^.?pdf$/.test(this.realType) ? pdf : /^.?xlsx?$/.test(this.realType) ? excel : /^.?zip$/.test(this.realType) ? zip : /^.?dwg$/.test(this.realType) ? dwg : /^.?pptx?$/.test(this.realType) ? ppt : this.$getUrl(this.src)
    }
  },
  methods: {
    clickHandle() {
      if (this.isZip) return
      const url = `${process.env.VUE_APP_OFFICE_PREFIX}?src=${this.$getUrl(this.src)}`
      window.open(url, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.c-accessory{
  padding: 5px;
  .img{
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-image{
    width: 100%;
    height: 100%;
  }
}
</style>
